<template>
    <view class="home-bg">
        <view class="title">
            <view class="title-l">风险双控</view>
            <view class="title-s">“隐患点+风险区”双管控精准服务</view>
        </view>
        <view class="home-menu cards">
            <view class="df jsb ac mb-20">
                <view class="box-left">信息总览</view>
                <!-- <view class="right-box" @click="toYinIntro">查看详情</view> -->
            </view>
            <!-- swiper -->
            <view class="home-wrap">
                <view class="menu-flex">
                    <view v-for="(item, index) in menuData" :key="index" :class="item.class" @click="menuClick(item)">
                        <image :src="item.src"></image>
                        <view class="menu-name">{{ item.name }}</view>
                    </view>
                </view>
                <!-- <swiper
                    class="wrap-h"
                    circular
                    :indicator-dots="true"
                    :autoplay="false"
                    v-if="false"
                >
                    <swiper-item>
                        <view class="menu-flex">
                            <view
                                v-for="(item, index) in menuData"
                                :key="index"
                                class="menu-box"
                                @click="menuClick(item)"
                            >
                                <image :src="item.src"></image>
                                <view class="menu-name">{{ item.name }}</view>
                            </view>
                        </view>
                    </swiper-item>
                    <swiper-item>
                        <view class="menu-flex">
                            <view
                                v-for="(item, index) in menuDataTwo"
                                :key="index"
                                class="menu-box"
                                @click="menuClick(item)"
                            >
                                <image :src="item.src"></image>
                                <view class="menu-name">{{ item.name }}</view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper> -->
            </view>
        </view>
        <view class="card mt-30">
            <view class="baoyu cards">
                <view class="df ac jsb mb-20">
                    <view class="box-left">预警预报</view>
                    <view class="df ac genduoTop" @click="onImg()">
                        <view class="genduos">更多</view>
                        <uv-icon name="arrow-right"></uv-icon>
                    </view>
                    <!-- </view> -->
                </view>
                <view class="linzai">
                    <view v-for="(item, index) in YjybList" :key="index" class="df jsb" @click="downloadFile(item)">
                        <view>{{ item.Name }}</view>
                        <view>{{ item.CreateTime }}</view>
                    </view>
                    <!-- 气象信息专报:受台风“杨柳”影响13日至15日我县有一轮大到暴雨天气过程 -->
                </view>
            </view>
        </view>
        <!-- 暴雨临灾预警 -->
        <view class="card mt-30">
            <view class="baoyu cards">
                <view class="df ac jsb mb-20">
                    <view class="box-left">暴雨临灾预警</view>
                    <view class="df ac genduoTop" @click="onImg()">
                        <view class="genduos">更多</view>
                        <uv-icon name="arrow-right"></uv-icon>
                    </view>
                </view>
                <view class="linzai">
                    <view v-for="(item, index) in BylzList" :key="index" class="df jsb" @click="downloadFile(item)">
                        <view>{{ item.Name }}</view>
                        <view>{{ item.CreateTime }}</view>
                    </view>
                    <!-- 气象信息专报:受台风“杨柳”影响13日至15日我县有一轮大到暴雨天气过程 -->
                </view>
            </view>
        </view>
        <!-- 地质灾害 -->
        <view class="card mt-30 cards">
            <view class="baoyu">
                <view class="df ac jsb mb-20">
                    <view class="box-left">地质灾害</view>
                </view>
            </view>
            <view class="geological">
                <view class="geo-box" @click="hazardBtn(item)" v-for="(item, index) in dzList" :key="index">
                    <view class="g-img">
                        <image :src="item.src"></image>
                    </view>
                    <view>
                        <view class="g-num">
                            {{ geologicalData[item.key] }}
                        </view>
                        <view class="g-num" style="font-size: 28rpx" v-if="item.name1">
                            {{ item.name1 }}
                        </view>
                        <view class="g-name">{{ item.name }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="mt-30">
            <weatherNow></weatherNow>
        </view>
        <view class="mt-30">
            <weatherDailyFcst></weatherDailyFcst>
        </view>
    </view>

    <lh-check-update ref="checkUpdateRef"></lh-check-update>
</template>

<script lang="ts" setup>
import { GetPageFile_API, GetTotalPntTotal_API } from '@/server/home'
import { useUserStore } from '@/stores'
import weatherNow from '@/pages/components/weatherNow.vue'
import weatherDailyFcst from '@/pages/components/weatherDailyFcst.vue'
import dayjs from 'dayjs'
const store = useUserStore()
const { userInfo } = storeToRefs(store)

const checkUpdateRef = ref()
//更新检查更新方法
const update = () => {
    checkUpdateRef.value?.update()
}
// 跳转搜索页面
onNavigationBarSearchInputClicked(() => {
    uni.navigateTo({
        animationType: 'slide-in-bottom',
        animationDuration: 200,
        url: '/pages/home/seach-item',
    })
})
// 点击扫码
onNavigationBarButtonTap(() => {
    // #ifdef APP-PLUS
    uni.scanCode({
        // autoZoom: true, //允许边角缩放
        scanType: ['qrCode'], //扫码类型 ['barCode', 'qrCode']
        success(res) {
            const tt = res.result
            const i = tt.split('#')[1]
            uni.navigateTo({
                url: i + '&title=扫码',
            })
        },
    })
    // #endif
})

const menuData = [
    {
        src: '/static/img/home/dzyh_2.png',
        name: '地灾隐患',
        class: 'menu-box linear-1',
        url: '/pages/home/survey',
    },
    {
        src: '/static/img/home/qpjf_2.png',
        name: '切坡建房',
        class: 'menu-box linear-2',
        url: '/pages/home/slope-build',
    },
    {
        src: '/static/img/home/xpdy_2.png',
        name: '风险区',
        class: 'menu-box linear-3',
        url: '/pages/home/slope-units',
    },
    {
        src: '/static/img/home/zyjc_2.png',
        name: '专业监测',
        class: 'menu-box linear-4',
        url: '/pages/home/jcd-list',
    },
    {
        src: '/static/img/home/scdt_2.png',
        name: '三查动态', //培训演练',
        class: 'menu-box linear-4',
        url: '/pages/home/xcxx-list',
        url1: '/pages/home/xcxx-list-town',
    },
    {
        src: '/static/img/home/zhsb_2.png',
        name: '应急处突',
        class: 'menu-box linear-3',
        url: '/pages/home/disaster-dcpj',
    },
    {
        src: '/static/img/home/fxyj_2.png',
        // name: '风险预警',
        name: '预警产品',
        class: 'menu-box linear-2',
        url: '/pages/home/warning-product',
    },
    // {
    // 	src: require('/static/img/home/menu7.png'),
    // 	name: '气象信息',
    //  url: '/pages/home/meteorological'
    // },
    // {
    // 	src: require('/static/img/home/fzjg.png'),
    // 	name: '防灾监管'
    // },
    {
        src: '/static/img/home/zcfg_2.png',
        name: '宣传培训',
        class: 'menu-box linear-1',
        url: '/pages/home/xcpxIndex',
    },
    {
        src: '/static/img/home/qpjf_2.png',
        name: '网格信息',
        class: 'menu-box linear-3',
        url: '/pages/home/wgxx',
    },
    {
        src: '/static/img/home/zcfg_2.png',
        name: '技术支撑',
        class: 'menu-box linear-1',
        url: '/pages/home/menuPage/ProvincialUnitsDetail?id=1382988497249390593',
    },
    {
        src: '/static/img/home/zyjc_2.png',
        name: '值班值守',
        class: 'menu-box linear-2',
        url: '/pages/home/duty',
    },
    {
        src: '/static/img/home/xpdy_2.png',
        name: '资料下载',
        class: 'menu-box linear-4',
        url: '/pages/home/zlxzIndex',
    },
    // {
    // 	src: require('@/static/img/home/fzkp.png'),
    // 	name: '防灾科普'
    // }
]
const menuDataTwo = [
    // {
    // 	src: require('@/static/img/home/xmgl.png'),
    // 	name: '项目管理',
    //  url: '/pages/home/menuPage/ProjectManagement'
    // },
    // {
    // 	src: require('@/static/img/home/jszc.png'),
    // 	name: '技术支撑',
    // },
    // {
    // 	src: require('@/static/img/home/yjzj.png'),
    // 	name: '应急专家'
    //  url: '/pages/home/menuPage/EmergencyExpert'
    // },
    // {
    // 	src: require('@/static/img/home/yjzb.png'),
    // 	name: '应急装备'
    //  url: '/pages/home/menuPage/EmergencyEquipment'
    // },
    // {
    // 	src: require('@/static/img/home/menu8.png'),
    // 	name: '值班查询'
    // },
    // {
    // 	src: require('@/static/img/home/fzdt.png'),
    // 	name: '防治动态',
    //  url: '/pages/home/menuPage/ControlDynamics'
    // },
    // {
    // 	src: require('@/static/img/home/zcfg.png'),
    // 	name: '政策法规',
    //  url: '/pages/home/menuPage/PoliciesUrl?url=' + 'http://zrzyt.hunan.gov.cn/xxgk/zcfg/'
    // },
    // {
    // 	src: require('@/static/img/home/fzkp.png'),
    // 	name: '防灾科普',
    //  url: '/pages/home/menuPage/DisasterPreventionPopular?url=' + 'http://www.china-shj.org.cn/'
    // }
]

const menuClick = (item) => {
    switch (item.name) {
        case '技术支撑':
            console.log('store.userInfo.AdminCode:', userInfo.value?.AdminCode)
            if (userInfo.value?.AdminCode == '431382') {
                uni.navigateTo({
                    url: item.url,
                })
            } else {
                uni.navigateTo({
                    url: '/pages/home/menuPage/TechnicalSupport',
                })
            }
            break;
        case '三查动态':
            if (userInfo.value?.UserType == 0) {
                uni.navigateTo({
                    url: item.url,
                })
            } else if (userInfo.value?.UserType == 1) {
                uni.navigateTo({
                    url: item.url1 + `?id=${userInfo.value?.UserId}`,
                })
            }
            break;
        default:
            uni.navigateTo({
                url: item.url,
            })
            break;
    }

}
const YjybList = ref([])
const BylzList = ref([])
const getFileList = async (type) => {
    const data = {
        TypeCode: type === 1 ? 'DQYJ' : 'QXYJ',
        pageNumber: 1,
        pageSize: 1000,
        AdminCode: userInfo.value?.AdminCode,
    }
    const res = await GetPageFile_API(data)
    if (res.IsSuccess) {
        if (res?.Data?.Data.length > 0) {
            if (type === 1) {
                //取前5个
                YjybList.value = res?.Data?.Data?.reverse()
                    .slice(0, 5)
                    .map((el) => ({
                        ...el,
                        CreateTime: dayjs(el.CreateTime).format('MM/DD HH时'),
                    }))
            } else {
                BylzList.value = res?.Data?.Data?.reverse()
                    .slice(0, 5)
                    .map((el) => ({
                        ...el,
                        CreateTime: dayjs(el.CreateTime).format('MM/DD HH时'),
                    }))
            }
        } else {
            type == 1 ? (YjybList.value = []) : (BylzList.value = [])
        }
    }
}
onShow(() => {
    getFileList(1)
    getFileList(2)
})
onLoad(() => {
    getDzzhd()
})
onShow(() => {
    nextTick(() => {
        update()
    })
})
const downloadFile = (item) => {
    console.log('item:', item)
    if (['png', 'jpeg', 'jpg'].includes(item.FileType)) {
        //图片预览
        uni.previewImage({
            urls: [import.meta.env.LH_FILE_BASEURLDZFZ + item.Id],
        })
    } else if (
        ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(
            item.FileType,
        )
    ) {
        //文件预览
        uni.downloadFile({
            url: import.meta.env.LH_FILE_BASEURLDZFZ + item.Id,
            success(res) {
                var filePath = res.tempFilePath
                uni.openDocument({
                    filePath: filePath,
                    showMenu: true,
                    success(res1) {
                        console.log('打开文档成功')
                    },
                })
            },
        })
    }
}
const onImg = () => {
    uni.navigateTo({
        url: '/pages/home/warning-list',
    })
}

const dzList = [
    {
        src: '/static/img/home/2-dzyhd.png',
        name: '地灾隐患点',
        name1: '',
        key: 'YhdCount',
        url: '/pages/home/survey',
    },
    {
        src: '/static/img/home/2-qpjfh.png',
        name: '切坡建房户',
        name1: '中高风险',
        key: 'QpjfCount',
        url: '/pages/home/slope-build',
    },
    {
        src: '/static/img/home/2-xpdys.png',
        name: '风险区数',
        name1: '中高风险',
        key: 'YhdCount',
        url: '/pages/home/slope-units',
    },
    {
        src: '/static/img/home/2-zyjcd.png',
        name: '专业监测点',
        name1: '',
        key: 'JcdCount',
        url: '/pages/home/jcd-list',
    },
    {
        src: '/static/img/home/2-zjylz.png',
        name: '自建雨量站',
        name1: '',
        key: 'GhYlzCount',
        url: '/pages/home/zjylz-list',
    },
    {
        src: '/static/img/home/2-qxylz.png',
        name: '气象雨量站',
        name1: '',
        key: 'QxYlzCount',
        url: '/pages/home/qxylz-list',
    },
]
const hazardBtn = (item) => {
    uni.navigateTo({
        url: item.url,
    })
}
// 地质灾害点数据
const geologicalData = ref({})
// 获取地质灾害点
const getDzzhd = async () => {
    const res = await GetTotalPntTotal_API()
    if (res.IsSuccess) {
        geologicalData.value = res.Data
    }
}

// 下拉刷新
onPullDownRefresh(() => {
    getDzzhd()
    update()
    uni.stopPullDownRefresh()
})
</script>

<style lang="scss" scoped>
.home-bg {
    background-size: 100% 632rpx;
    background-repeat: no-repeat;
    background-image: url('~@/static/img/home/home-bg2.png');
    padding: 30rpx;

    .title {
        // position: absolute;
        // top: 20rpx;
    }

    .title-l {
        color: #ffffff;
        font-size: 50rpx;
        font-weight: bold;
        padding-left: 20rpx;
    }

    .title-s {
        color: #ffffff;
        font-size: 30rpx;
    }

    .home-menu {
        width: 100%;
        background-color: #ffffff;
        margin-top: 100rpx;

        .home-wrap {
            width: 100%;

            .wrap-h {
                height: 350rpx;
            }

            .menu-flex {
                display: grid;
                // 四列布局
                grid-template-columns: repeat(4, 1fr);
                /* 四列等宽布局 */
                grid-gap: 20rpx; // 两列之间的间距

                .menu-box {
                    display: flex;
                    flex-direction: column;
                    justify-content: center; // X轴剧中
                    align-items: center; // Y轴剧中
                    border-radius: 10rpx;
                    padding: 24rpx 0rpx;

                    image {
                        height: 95rpx;
                        width: 95rpx;
                    }

                    .menu-name {
                        font-size: 28rpx;
                        font-weight: bold;
                        color: #858585;
                    }
                }
            }
        }
    }

    .card {
        width: 100%;
        background: #fff;

        .baoyu {
            .genduoTop {
                // padding: 20rpx 0;

                .genduos {
                    margin-right: 10rpx;
                    color: #adadad;
                    font-size: 28rpx;
                }
            }

            .linzai {
                font-size: 26rpx;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                /* 设置显示的行数 */
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    .geological {
        display: grid;
        grid-template-columns: 1fr 1fr; // 两列布局
        grid-gap: 30rpx; // 两列之间的间距

        .geo-box {
            padding: 20rpx 0;
            display: flex;
            // flex-direction: row;
            justify-content: space-around; // X轴剧中
            align-items: center; // Y轴剧中
            box-shadow: 0px 2px 10px #e7e6e6;
            border-radius: 10rpx;
            background: linear-gradient(270deg,
                    rgba(216, 237, 255, 0.5) 0%,
                    rgba(230, 245, 255, 0.5) 100%);
            border: 0px solid;
            border-image: linear-gradient(90deg,
                    rgba(185.00000417232513, 226.0000017285347, 255, 1),
                    rgba(255, 255, 255, 1)) 0 0;

            .g-contrast {
                color: #333333;
                font-size: 20rpx;

                .up {
                    color: #f8bd45;
                }

                .down {
                    color: #aa00ff;
                }
            }

            .g-img {
                width: 100rpx;
                height: 100rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .g-num {
                line-height: 50rpx;
                color: #0f8ef7;
                font-size: 36rpx;
                font-weight: bold;
                font-style: italic;
            }

            .g-name {
                line-height: 50rpx;
                color: #333333;
                font-size: 30rpx;
                font-weight: bold;
            }
        }
    }
}
</style>
